<template>
  <div class="todolist-app">
    <!-- Header -->
    <AppHeader 
      :current-user="currentUser"
      :show-search="false"
      @login="showLoginModal"
      @register="showRegisterModal"
      @logout="handleLogout"
    />

    <!-- Breadcrumb Navigation -->
    <nav class="breadcrumb-nav">
      <div class="breadcrumb-content">
        <div class="breadcrumb">
          <router-link to="/" class="breadcrumb-item">
            <i class="fas fa-home"></i>
            笔记中心
          </router-link>
          <span class="breadcrumb-item">
            <i class="fas fa-tasks"></i>
            计划列表
          </span>
        </div>
      </div>
    </nav>

    <!-- Main Content -->
    <main class="todolist-main">
      <!-- Todo Header -->
      <section class="todo-header">
        <div class="todo-stats">
          <div class="stat-card">
            <div class="stat-number">{{ totalTasks }}</div>
            <div class="stat-label">总任务</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">{{ completedTasks }}</div>
            <div class="stat-label">已完成</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">{{ pendingTasks }}</div>
            <div class="stat-label">待完成</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">{{ completionRate }}%</div>
            <div class="stat-label">完成率</div>
          </div>
        </div>
      </section>

      <!-- Todo Controls -->
      <section class="todo-controls">
        <!-- Filter Controls Row -->
        <div class="todo-controls-bottom">
          <div class="filter-controls">
            <button 
              class="filter-btn" 
              :class="{ active: currentFilter === 'all' }"
              @click="setFilter('all')"
            >
              <i class="fas fa-list"></i>
              全部
            </button>
            <button 
              class="filter-btn" 
              :class="{ active: currentFilter === 'pending' }"
              @click="setFilter('pending')"
            >
              <i class="fas fa-clock"></i>
              待完成
            </button>
            <button 
              class="filter-btn" 
              :class="{ active: currentFilter === 'completed' }"
              @click="setFilter('completed')"
            >
              <i class="fas fa-check"></i>
              已完成
            </button>
          </div>
          <div class="sort-controls">
            <select v-model="currentSort" @change="sortTasks" class="sort-select">
              <option value="created">按创建时间</option>
              <option value="priority">按优先级</option>
              <option value="dueDate">按截止时间</option>
              <option value="name">按名称排序</option>
            </select>
          </div>
        </div>
      </section>

      <!-- Add Task Button -->
      <section class="todo-controls-top" v-if="tasks.length > 0">
        <button 
          class="btn btn-primary btn-compact" 
          @click="showAddTaskModal"
        >
          添加任务
        </button>
      </section>

      <!-- Todo List -->
      <section class="todo-list-section">
        <!-- Empty State -->
        <div class="empty-todos" v-if="filteredTasks.length === 0">
          <div class="empty-content">
            <i class="fas fa-clipboard-list"></i>
            <h3>{{ getEmptyMessage() }}</h3>
            <p>{{ getEmptyDescription() }}</p>
            <button 
              class="btn btn-primary btn-compact" 
              @click="showAddTaskModal" 
              v-if="currentFilter === 'all'"
            >
              添加任务
            </button>
          </div>
        </div>

        <!-- Task List -->
        <div class="task-list" v-if="filteredTasks.length > 0">
          <div 
            v-for="task in filteredTasks" 
            :key="task.id"
            class="task-item"
            :class="{ 
              completed: task.status === 'completed',
              overdue: isOverdue(task)
            }"
          >
            <div class="task-checkbox">
              <input 
                type="checkbox"
                :checked="task.status === 'completed'"
                @change="toggleTask(task.id)"
              >
            </div>
            <div class="task-content">
              <div class="task-header">
                <h4 class="task-title">{{ task.title }}</h4>
                <div class="task-meta">
                  <span class="priority-badge" :class="`priority-${task.priority}`">
                    {{ getPriorityText(task.priority) }}
                  </span>
                  <span v-if="task.dueDate" class="due-date" :class="{ overdue: isOverdue(task) }">
                    <i class="fas fa-calendar"></i> {{ formatDate(task.dueDate) }}
                  </span>
                </div>
              </div>
              <p v-if="task.description" class="task-description">
                {{ task.description }}
              </p>
            </div>
            <div class="task-actions">
              <button class="action-btn" @click="showEditTaskModal(task)" title="编辑任务">
                <i class="fas fa-edit"></i>
              </button>
              <button class="action-btn delete-btn" @click="deleteTask(task.id)" title="删除任务">
                <i class="fas fa-trash"></i>
              </button>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- Add Task Modal -->
    <div class="modal" v-if="showTaskModal" @click="handleModalOverlayClick">
      <div class="modal-overlay"></div>
      <div class="modal-content">
        <div class="modal-header">
          <h3><i class="fas fa-plus-circle"></i> 添加新任务</h3>
          <button class="modal-close" @click="hideTaskModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <form @submit="handleAddTask">
            <div class="form-group">
              <label for="taskTitle">任务标题</label>
              <input 
                type="text" 
                id="taskTitle" 
                v-model="newTask.title"
                class="form-input" 
                placeholder="请输入任务标题" 
                required
              >
            </div>
            <div class="form-group">
              <label for="taskDescription">任务描述</label>
              <textarea 
                id="taskDescription" 
                v-model="newTask.description"
                class="form-textarea" 
                placeholder="请输入任务描述（可选）" 
                rows="3"
              ></textarea>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label for="taskPriority">优先级</label>
                <select id="taskPriority" v-model="newTask.priority" class="form-select">
                  <option value="low">低</option>
                  <option value="medium">中</option>
                  <option value="high">高</option>
                </select>
              </div>
              <div class="form-group">
                <label for="taskDueDate">截止时间</label>
                <input 
                  type="date" 
                  id="taskDueDate" 
                  v-model="newTask.dueDate"
                  class="form-input"
                >
              </div>
            </div>
            <div class="form-actions">
              <button type="button" class="btn btn-ghost" @click="hideTaskModal">
                取消
              </button>
              <button type="submit" class="btn btn-primary btn-compact">
                添加任务
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- Edit Task Modal -->
    <div class="modal" v-if="showEditTaskModalFlag" @click="handleModalOverlayClick">
      <div class="modal-overlay"></div>
      <div class="modal-content">
        <div class="modal-header">
          <h3><i class="fas fa-edit"></i> 编辑任务</h3>
          <button class="modal-close" @click="hideEditTaskModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <form @submit="handleEditTask">
            <div class="form-group">
              <label for="editTaskTitle">任务标题</label>
              <input 
                type="text" 
                id="editTaskTitle" 
                v-model="editingTask.title"
                class="form-input" 
                placeholder="请输入任务标题" 
                required
              >
            </div>
            <div class="form-group">
              <label for="editTaskDescription">任务描述</label>
              <textarea 
                id="editTaskDescription" 
                v-model="editingTask.description"
                class="form-textarea" 
                placeholder="请输入任务描述（可选）" 
                rows="3"
              ></textarea>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label for="editTaskPriority">优先级</label>
                <select id="editTaskPriority" v-model="editingTask.priority" class="form-select">
                  <option value="low">低</option>
                  <option value="medium">中</option>
                  <option value="high">高</option>
                </select>
              </div>
              <div class="form-group">
                <label for="editTaskDueDate">截止时间</label>
                <input 
                  type="date" 
                  id="editTaskDueDate" 
                  v-model="editingTask.dueDate"
                  class="form-input"
                >
              </div>
            </div>
            <div class="form-actions">
              <button type="button" class="btn btn-ghost" @click="hideEditTaskModal">
                取消
              </button>
              <button type="submit" class="btn btn-primary btn-compact">
                <i class="fas fa-save"></i>
                保存更改
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AppHeader from '@/components/AppHeader.vue'
import apiService from '@/services/api.js'
// 移除了 VueDraggable 导入

export default {
  name: 'TodolistPage',
  components: {
    AppHeader,
    // 移除了 VueDraggable 组件注册
  },
  data() {
    return {
      currentUser: null,
      tasks: [],
      currentFilter: 'all',
      currentSort: 'created',
      showTaskModal: false,
      showEditTaskModalFlag: false,
      newTask: {
        title: '',
        description: '',
        priority: 'medium',
        dueDate: ''
      },
      editingTask: {
        id: null,
        title: '',
        description: '',
        priority: 'medium',
        dueDate: ''
      }
    }
  },
  computed: {
    totalTasks() {
      return this.tasks.length
    },
    pendingTasks() {
      return this.tasks.filter(task => task.status !== 'completed').length
    },
    completedTasks() {
      return this.tasks.filter(task => task.status === 'completed').length
    },
    completionRate() {
      if (this.totalTasks === 0) return 0
      return Math.round((this.completedTasks / this.totalTasks) * 100)
    },
    filteredTasks() {
      let filtered = []
      switch (this.currentFilter) {
        case 'pending':
          filtered = this.tasks.filter(task => task.status !== 'completed')
          break
        case 'completed':
          filtered = this.tasks.filter(task => task.status === 'completed')
          break
        default:
          filtered = this.tasks
      }
      return this.getSortedTasks(filtered)
    }
  },
  mounted() {
    this.checkAuthStatus()
    this.loadData()
  },
  methods: {
    async loadData() {
      if (!this.currentUser) {
        this.tasks = []
        return
      }
      
      try {
        const response = await apiService.getTasks({ sortBy: 'order', sortOrder: 'asc' })
        this.tasks = response.tasks || []
        
        // 检查是否需要初始化排序
        if (this.tasks.length > 0 && this.tasks.some(task => task.order === undefined || task.order === null)) {
          // 初始化排序
          await apiService.initializeTaskOrder();
          // 重新加载任务
          const refreshResponse = await apiService.getTasks({ sortBy: 'order', sortOrder: 'asc' })
          this.tasks = refreshResponse.tasks || []
        }
      } catch (error) {
        console.error('加载任务失败:', error)
        this.tasks = []
      }
    },
    checkAuthStatus() {
      const savedUser = localStorage.getItem('currentUser')
      const savedToken = localStorage.getItem('auth_token')
      
      if (savedUser && savedToken) {
        this.currentUser = JSON.parse(savedUser)
      }
    },
    async addTask(e) {
      e.preventDefault()
      
      if (!this.newTask.title.trim()) {
        await this.$alert('请输入任务标题', {
          title: '输入错误',
          variant: 'warning'
        })
        return
      }
      
      try {
        // 使用API服务创建任务
        const taskData = {
          title: this.newTask.title,
          description: this.newTask.description,
          priority: this.newTask.priority,
          dueDate: this.newTask.dueDate || null
        }
        
        const response = await apiService.createTask(taskData)
        const createdTask = response.data
        
        // 将新创建的任务添加到任务列表中
        this.tasks.push(createdTask)
        
        // 显示成功提示
        this.$toast('任务添加成功！', {
          title: '添加成功',
          variant: 'success'
        })
        
        // Reset form and close modal
        this.resetNewTask()
        this.hideTaskModal()
        
        // 重新加载数据以确保页面显示最新信息
        this.loadData()
      } catch (error) {
        console.error('创建任务失败:', error)
        this.$toast(error.message || '创建任务失败', {
          title: '创建失败',
          variant: 'error'
        })
      }
    },
    showAddTaskModal() {
      this.resetNewTask()
      // Set default due date to tomorrow
      const tomorrow = new Date()
      tomorrow.setDate(tomorrow.getDate() + 1)
      this.newTask.dueDate = tomorrow.toISOString().split('T')[0]
      this.showTaskModal = true
    },
    hideTaskModal() {
      this.showTaskModal = false
      this.resetNewTask()
    },
    resetNewTask() {
      this.newTask = {
        title: '',
        description: '',
        priority: 'medium',
        dueDate: ''
      }
    },
    showEditTaskModal(task) {
      // 处理日期格式，确保符合HTML date输入框的要求 (YYYY-MM-DD)
      let dueDate = '';
      if (task.dueDate) {
        // 如果dueDate是完整的ISO日期字符串，提取日期部分
        if (task.dueDate.includes('T')) {
          dueDate = task.dueDate.split('T')[0];
        } else {
          // 如果已经是日期格式，直接使用
          dueDate = task.dueDate;
        }
      }
      
      this.editingTask = {
        id: task.id,
        title: task.title,
        description: task.description || '',
        priority: task.priority,
        dueDate: dueDate
      }
      this.showEditTaskModalFlag = true
    },
    hideEditTaskModal() {
      this.showEditTaskModalFlag = false
      this.resetEditingTask()
    },
    resetEditingTask() {
      this.editingTask = {
        id: null,
        title: '',
        description: '',
        priority: 'medium',
        dueDate: ''
      }
    },
    async handleAddTask(e) {
      e.preventDefault()
      await this.addTask(e)
    },
    async handleEditTask(e) {
      e.preventDefault()
      
      if (!this.editingTask.title.trim()) {
        await this.$alert('请输入任务标题', {
          title: '输入错误',
          variant: 'warning'
        })
        return
      }
      
      try {
        const taskData = {
          title: this.editingTask.title,
          description: this.editingTask.description,
          priority: this.editingTask.priority,
          dueDate: this.editingTask.dueDate || null
        }
        
        const updatedTask = await apiService.updateTask(this.editingTask.id, taskData)
        
        const taskIndex = this.tasks.findIndex(t => t.id === this.editingTask.id)
        if (taskIndex > -1) {
          const originalTitle = this.tasks[taskIndex].title
          this.tasks[taskIndex] = updatedTask
          
          // 显示成功提示
          this.$toast(`任务"${originalTitle}"已更新`, {
            title: '更新成功',
            variant: 'success'
          })
        }
        
        this.hideEditTaskModal()
        
        // 重新加载数据以确保页面显示最新信息
        this.loadData()
      } catch (error) {
        console.error('更新任务失败:', error)
        this.$toast(error.message || '更新任务失败', {
          title: '更新失败',
          variant: 'error'
        })
      }
    },
    async toggleTask(taskId) {
      try {
        await apiService.toggleTaskStatus(taskId)
        
        // 更新本地任务状态
        const task = this.tasks.find(t => t.id === taskId)
        if (task) {
          task.status = task.status === 'completed' ? 'pending' : 'completed'
        }
      } catch (error) {
        console.error('切换任务状态失败:', error)
      }
    },
    async deleteTask(taskId) {
      const confirmed = await this.$confirm('确定要删除这个任务吗？', {
        title: '删除任务',
        variant: 'error',
        confirmText: '删除'
      })
      
      if (confirmed) {
        try {
          const task = this.tasks.find(t => t.id === taskId)
          await apiService.deleteTask(taskId)
          
          const index = this.tasks.findIndex(t => t.id === taskId)
          if (index > -1) {
            this.tasks.splice(index, 1)
          }
          
          // 显示删除成功的Toast提示
          this.$toast(`任务"${task.title}"已删除`, {
            title: '删除成功',
            variant: 'success'
          })
        } catch (error) {
          console.error('删除任务失败:', error)
          this.$toast(error.message || '删除任务失败', {
            title: '删除失败',
            variant: 'error'
          })
        }
      }
    },
    
    setFilter(filter) {
      this.currentFilter = filter
    },

    getSortedTasks(tasks) {
      const sorted = [...tasks]
      
      switch (this.currentSort) {
        case 'priority': {
          const priorityOrder = { high: 3, medium: 2, low: 1 }
          return sorted.sort((a, b) => priorityOrder[b.priority] - priorityOrder[a.priority])
        }
        case 'dueDate':
          return sorted.sort((a, b) => {
            if (!a.dueDate && !b.dueDate) return 0
            if (!a.dueDate) return 1
            if (!b.dueDate) return -1
            return new Date(a.dueDate) - new Date(b.dueDate)
          })
        case 'name':
          return sorted.sort((a, b) => {
            // 处理标题可能为undefined或null的情况
            const titleA = a.title || ''
            const titleB = b.title || ''
            return titleA.localeCompare(titleB)
          })
        case 'created':
        default:
          return sorted.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
      }
    },
    sortTasks() {
      // Sorting is handled by computed property
    },
    isOverdue(task) {
      if (!task.dueDate || task.status === 'completed') return false
      return new Date(task.dueDate) < new Date()
    },
    handleModalOverlayClick(e) {
      if (e.target.classList.contains('modal') || e.target.classList.contains('modal-overlay')) {
        this.hideTaskModal()
        this.hideEditTaskModal()
      }
    },
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      })
    },
    formatDateForInput(dateString) {
      if (!dateString) return '';
      // 如果是完整的ISO日期字符串，提取日期部分
      if (dateString.includes('T')) {
        return dateString.split('T')[0];
      }
      return dateString;
    },
    getPriorityText(priority) {
      const priorityMap = {
        low: '低优先级',
        medium: '中优先级',
        high: '高优先级'
      }
      return priorityMap[priority] || '中优先级'
    },
    getEmptyMessage() {
      switch (this.currentFilter) {
        case 'pending':
          return '暂无待完成任务'
        case 'completed':
          return '暂无已完成任务'
        default:
          return '暂无任务'
      }
    },
    getEmptyDescription() {
      switch (this.currentFilter) {
        case 'pending':
          return '所有任务都已完成，真棒！'
        case 'completed':
          return '还没有完成任何任务'
        default:
          return '开始添加您的第一个任务吧'
      }
    },
    showLoginModal() {
      // Handle login modal
    },
    showRegisterModal() {
      // Handle register modal
    },
    handleLogout() {
      this.currentUser = null
      localStorage.removeItem('currentUser')
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
/* Import Font Awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

.todolist-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8fafc;
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  padding: 0.75rem 0;
}

.breadcrumb-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  color: #64748b;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.breadcrumb-item:hover {
  color: #3b82f6;
}

.breadcrumb-item:not(:last-child)::after {
  content: '/';
  margin-left: 0.5rem;
  color: #cbd5e1;
}

/* Main Content */
.todolist-main {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 2rem;
}

/* Todo Header */
.todo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.todo-stats {
  display: flex;
  gap: 1rem;
}

.stat-card {
  text-align: center;
  padding: 1rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  min-width: 100px;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 12px;
  color: #64748b;
}

/* Todo Controls Top */
.todo-controls-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}

/* Todo Controls */
.todo-controls {
  margin-bottom: 1.5rem;
}

.todo-controls-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.filter-controls {
  display: flex;
  gap: 0.5rem;
}

.filter-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-btn.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.sort-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sort-select {
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
  background: white;
}

/* Task List Section */
.todo-list-section {
  margin-top: 1.5rem;
}

/* Empty State */
.empty-todos {
  text-align: center;
  padding: 3rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.empty-content i {
  font-size: 3rem;
  color: #cbd5e1;
}

.empty-content h3 {
  font-size: 18px;
  font-weight: 500;
  color: #1e293b;
  margin: 0;
}

.empty-content p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

/* Task List */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.task-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.task-item:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.task-item.completed {
  opacity: 0.7;
}

.task-item.overdue {
  border-color: #fecaca;
}

.task-checkbox {
  margin-top: 0.25rem;
}

.task-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.task-content {
  flex: 1;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
  gap: 1rem;
}

.task-title {
  font-size: 16px;
  font-weight: 500;
  color: #1e293b;
  margin: 0;
}

.task-title.completed {
  text-decoration: line-through;
  color: #94a3b8;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.priority-badge {
  font-size: 10px;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-weight: 500;
}

.priority-badge.priority-high {
  background: #fee2e2;
  color: #ef4444;
}

.priority-badge.priority-medium {
  background: #fef3c7;
  color: #f59e0b;
}

.priority-badge.priority-low {
  background: #dcfce7;
  color: #10b981;
}

.due-date {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.due-date.overdue {
  color: #ef4444;
  font-weight: 500;
}

.task-description {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

.task-actions {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  padding: 0.5rem;
  border: none;
  background: none;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.delete-btn:hover {
  background: #fee2e2;
  color: #ef4444;
}

/* Task Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: white;
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.modal-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: #f1f5f9;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #64748b;
}

.modal-close:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.modal-body {
  padding: 1.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.form-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
}

.form-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  min-height: 100px;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.form-textarea:focus {
  outline: none;
  border-color: #3b82f6;
}

.form-select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  transition: border-color 0.2s ease;
}

.form-select:focus {
  outline: none;
  border-color: #3b82f6;
}

.form-date {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.form-date:focus {
  outline: none;
  border-color: #3b82f6;
}

.form-row {
  display: flex;
  gap: 1rem;
}

.form-row .form-group {
  flex: 1;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.btn {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-compact {
  padding: 0.5rem 1rem;
}

.btn-secondary {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}

.btn-secondary:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.btn-primary {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.btn-primary:hover {
  background: #2563eb;
  border-color: #2563eb;
}

.btn-ghost {
  background: transparent;
  color: #64748b;
  border-color: #e2e8f0;
}

.btn-ghost:hover {
  background: #f1f5f9;
  color: #1e293b;
}

/* Responsive Design */
@media (max-width: 768px) {
  .todolist-main {
    padding: 1rem;
  }
  
  .todo-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .todo-stats {
    flex-wrap: wrap;
  }
  
  .stat-card {
    flex: 1;
    min-width: 80px;
  }
  
  .todo-controls-top {
    justify-content: center;
  }
  
  .todo-controls-bottom {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .filter-controls {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .sort-controls {
    justify-content: center;
  }
  
  .task-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .task-meta {
    flex-wrap: wrap;
  }
  
  .form-row {
    flex-direction: column;
    gap: 1rem;
  }
}
</style>